<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <a href="http://www.atguigu.com" @click.prevent="goToAt">点我到{{message}}学习</a>
</div>
<script src="../JavaScript/vue.js"></script>
<script>
  /*
  在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
  为了解决这个问题，Vue.js 为 `v-on` 提供了**事件修饰符**。之前提过，修饰符是由点开头的指令后缀来表示的
  Vue中的事件修饰符：
    prevent：阻止默认事件
    stop：阻止事件冒泡
    once：事件只触发一次
    capture：使用事件的捕获模式
    self：只有e.target是当前操作的DOM元素才触发事件
    passive：事件的默认行为立即执行，无需等待事件回调执行完毕
  * */
  const vm = new Vue({
    el: "#app",
    data: {message: "尚硅谷",},
    methods: {
      goToAt(e){
        alert(this.message)
      }
    }
  })
</script>
</body>
</html>
